<template>
    <div class="components-container board">
        <kanban :key="1" :list="list1" :group="group" class="kanban todo" header-text="Todo"></kanban>
        <kanban :key="2" :list="list2" :group="group" class="kanban working" header-text="Working"></kanban>
        <kanban :key="3" :list="list3" :group="group" class="kanban done" header-text="Done"></kanban>
    </div>
</template>
<script>
    const kanban = httpVueLoader('/vue/components/kanban/index.vue')


    module.exports = {
        name: 'DragKanbanDemo',
        components: {
            kanban
        },
        data() {
            return {
                group: 'mission',
                list1: [
                    { name: 'Mission', id: 1 },
                    { name: 'Mission', id: 2 },
                    { name: 'Mission', id: 3 },
                    { name: 'Mission', id: 4 }
                ],
                list2: [
                    { name: 'Mission', id: 5 },
                    { name: 'Mission', id: 6 },
                    { name: 'Mission', id: 7 }
                ],
                list3: [
                    { name: 'Mission', id: 8 },
                    { name: 'Mission', id: 9 },
                    { name: 'Mission', id: 10 }
                ]
            }
        }
    }
</script>
<style>
    .board {
        width: 1000px;
        margin-left: 20px;
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        align-items: flex-start;
    }

	.board-column.kanban.todo .board-column-header {
		background: #4A9FF9;
	}

	.board-column.kanban.working .board-column-header {
		background: #f9944a;
	}

	.board-column.kanban.done .board-column-header {
		background: #2ac06d;
	}

</style>

